---
title: X Pixel (Twitter Pixel)
description: Track conversions and build audiences for advertising campaigns on X (formerly Twitter).
lastModified: 2025-09-24

icon: x
---

X Pixel (formerly Twitter Pixel) is X's conversion tracking and audience building tool. It helps you measure ad performance, retarget website visitors, and optimize campaigns on the X platform. By default, c15t loads this script based on `marketing` consent.

## Implementation

<Tabs items={['JavaScript', 'React', 'Next.js + App Router', 'Next.js + Pages Router']}>
  <Tab value="JavaScript">
    ```ts
    import { configureConsentManager } from 'c15t';
    import { xPixel } from '@c15t/scripts/x-pixel';

    configureConsentManager({
      // ... 
      scripts: [
        xPixel({
          id: '123456789012345',
        }),
      ],
    });
    ```
  </Tab>

  <Tab value="React">
    ```tsx
    import { xPixel } from '@c15t/scripts/x-pixel';
    import { ConsentManagerProvider } from '@c15t/react';

    export function App({ children }: { children: React.ReactNode }) { 
      return (
        <ConsentManagerProvider
          options={{
            scripts: [
              xPixel({
                id: '123456789012345',
              }),
            ],
          }}
        >
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js + App Router">
    ```tsx
    'use client';
    import { xPixel } from '@c15t/scripts/x-pixel';
    import { ClientSideOptionsProvider } from '@c15t/nextjs/client';

    export function ConsentManagerClient({ children }: { children: React.ReactNode }) { 
      return (
        <ClientSideOptionsProvider
          scripts={[
            xPixel({
              id: '123456789012345',
            }),
          ]}
        >
          {children}
        </ClientSideOptionsProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js + Pages Router">
    ```tsx
    import { xPixel } from '@c15t/scripts/x-pixel';
    import { ConsentManagerProvider } from '@c15t/nextjs';

    export function App({ children }: { children: React.ReactNode }) { 
      return (
        <ConsentManagerProvider
          options={{
            // ... other options
            scripts: [
              xPixel({
                id: '123456789012345',
              }),
            ],
          }}
        >
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>
</Tabs>

## xPixelEvent

You can use the `xPixelEvent` function to track events. This is a wrapper around the `twq` function that the X Pixel script uses.

```ts
import { xPixelEvent } from '@c15t/scripts/x-pixel';

xPixelEvent('tw-xxxx-xxxx', { value: 10.00, currency: 'USD' });
```

## Types

### XPixelOptions

<AutoTypeTable path="./packages/scripts/src/x-pixel.ts" name="XPixelOptions" />

### Script

<AutoTypeTable path="./packages/core/src/libs/script-loader/types.ts" name="Script" />

### XPixelEvent

<AutoTypeTable path="./packages/scripts/src/x-pixel.ts" name="XPixelEvent" />

### XPixelContent

<AutoTypeTable path="./packages/scripts/src/x-pixel.ts" name="XPixelContent" />
